<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询页面</title>
    <!-- 引入 Vue.js 3 和 Axios -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.prod.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <h1>查询页面</h1>
    <div class="query-input">
        <input v-model="queryInput" placeholder="输入查询内容..."/>
        <button @click="submitQuery">查询</button>
    </div>
    <div v-if="response" class="query-result">
        <h2>查询结果：</h2>
        <p>{{ response }}</p>
    </div>
    <div v-if="errorMessage" class="error-message">
        <p>{{ errorMessage }}</p>
    </div>
</div>

<script>
    const app = Vue.createApp({
        data() {
            return {
                queryInput: '',
                response: null,
                errorMessage: null,
            };
        },
        methods: {
            async submitQuery() {
                if (!this.queryInput.trim()) {
                    this.errorMessage = '请输入查询内容';
                    return;
                }

                const result = await axios.post('http://localhost:8080/api/anythingllm/prompt', {
                    prompt: this.queryInput,
                    workspace: 'school',
                });
                this.response = result.data;
                this.errorMessage = null;
            }
        }
    });

    app.mount('#app');
</script>

<style>
    .query-page {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
    }

    .query-input {
        margin-bottom: 20px;
    }

    .query-input input {
        width: 80%;
        padding: 10px;
        margin-right: 10px;
        border-radius: 4px;
        border: 1px solid #ddd;
    }

    .query-input button {
        padding: 10px 20px;
        background-color: #4caf50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .query-result {
        margin-top: 20px;
    }

    .error-message {
        color: red;
        margin-top: 20px;
    }
</style>
</body>
</html>
